<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 加载头部css -->
    <div th:replace="common/head::head"></div>
    <!-- 加载必要的js -->
    <div th:replace="common/script::script"></div>
    <style>
        table td:nth-child(1) {text-align: left;}
        table td:nth-child(2) {text-align: left;}
        table td:nth-child(3) {text-align: left;}
        table td:nth-child(4) {text-align: center;}
        table td p:nth-child(1) {margin: 5px 0;}
        table td p:nth-child(1) {margin: 10px 0;}
        .title {font-size: 18px}
        .text {color: grey;font-size: 14px}
    </style>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--加载侧边栏-->
        <div th:replace="common/leftsidebar::leafsiderbar"></div>
        <!--加载导航栏-->
        <div th:replace="common/navbar::navber"></div>
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="panel panel-default" style="text-align:center">
                            <div class="panel-heading">
                                <p style="margin:3px 0;font-size:28px">
                                    <strong>[[${session.user.name}]]</strong>&ensp;的个人中心
                                </p>
                            </div>
                            <div class="panel-body">
                                <!-- 头像开始 -->
                                <div class="avatar">
                                    <a href="javascript:void(0);" onclick="$('#changeAvatarModal').modal('show')" title="更换头像">
                                        <img src="/asserts/images/avatar/0.jpg" th:src="@{/images/{userId}(userId=${session.user.getId()}+'.jpg')}"
                                             idth="140" height="140" style="border-radius:50%" alt="Avatar" id="user_avatar_mycenter"/>
                                    </a>
                                </div>
                                <!-- 头像结束 -->
                                <!-- 用户名 -->
                                <p style="margin:5px 0;color:rgb(0, 170, 255);font-size:22px">[[${session.user.name}]]</p>
                                <!-- 用户类型 -->
                                <p class="title">
                                    <span>用户类型: </span>
                                    <span>[[${session.user.getTypeStr()}]]</span>
                                </p>
                                <br>
                                <table class="table table-hover" style="text-align:center;">
                                    <colgroup>
                                        <col style="width:8%">
                                        <col style="width:55%">
                                        <col style="width:20%">
                                        <col style="width:17%">
                                    </colgroup>
                                    <tbody>
                                    <!-- 用户信息区域 -->
                                    <!-- 用户信息区域 -->
                                    <tr>
                                        <td style="vertical-align:middle;"><img src="asserts/images/users/icon_userdata.png" th:src="@{/asserts/images/users/icon_userdata.png}" height="40" style="margin-left: 6px;"></td>
                                        <td>
                                            <p class="title">用户信息</p>
                                            <p class="text">帐号归属者的基本资料</p>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <i	class="mdi mdi-verified"></i><span>使用中</span>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <a href="javascript:void(0);" class="btn btn-round btn-success btn-w-xs btn-primary" onclick="$('#userInfoModal').modal('show')"><label><i class="mdi mdi-account"></i></label>查看</a>
                                        </td>
                                    </tr>
                                    <!-- 账号密码区域 -->
                                    <tr>
                                        <td style="vertical-align:middle;"><img src="asserts/images/users/icon_password.png" th:src="@{/asserts/images/users/icon_password.png}" height="45"></td>
                                        <td>
                                            <p class="title">账号密码</p>
                                            <p class="text">为了保护帐号安全，登录时使用</p>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <i class="mdi mdi-verified"></i><span>已设置</span>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <a href="javascript:void(0);" class="btn btn-round  btn-w-xs btn-primary btn-warning " onclick="$('#changePasswordModal').modal('show')"><label><i class="mdi mdi-alert-outline"></i></label>修改</a>
                                        </td>
                                    </tr>
                                    <!-- 手机区域 -->
                                    <tr>
                                        <td style="vertical-align:middle;"><img src="asserts/images/users/icon_bindmobile.png" th:src="@{/asserts/images/users/icon_bindmobile.png}" height="45"></td>
                                        <td>
                                            <p class="title">联系手机<span style="color: grey;" >&emsp;[[${session.user.getHidePhone()}]]</span></p>
                                            <p class="text">用于找回密码、安全验证、作为登录账号</p>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <i class="mdi mdi-information" th:class="${session.user.getPhone()==null?'mdi mdi-information':'mdi mdi-verified'}"></i><span th:text="${session.user.getPhone()==null?'未绑定':'绑定'}"></span>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <!--绑定-->
                                            <a href="javascript:void(0);" th:if="${session.user.getPhone() == null}" class="btn btn-w-xs btn-round btn-primary" onclick="$('#bindPhoneModal').modal('show')"><label><i class="mdi mdi-security"></i></label>绑定</a>
                                            <!--解绑-->
                                            <a href="javascript:void(0);" th:if="${session.user.getPhone() != null}" class="btn btn-w-xs btn-round btn-danger" onclick="$('#unBindPhoneModal').modal('show')"><label><i class="mdi mdi-alert-outline"></i></label>解绑</a>
                                        </td>
                                    </tr>
                                    <!-- 邮箱区域 -->
                                    <tr>
                                        <td style="vertical-align:middle;"><img src="asserts/images/users/icon_bindemial.png" th:src="@{/asserts/images/users/icon_bindemial.png}" height="45"></td>
                                        <td>
                                            <p class="title">联系邮箱<span style="color: grey;">&emsp;[[${session.user.getHideEmail()}]]</span></p>
                                            <p class="text">用于找回密码、安全验证、作为登录账号</p>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <i class="mdi mdi-information" th:class="${session.user.getEmail()==null?'mdi mdi-information':'mdi mdi-verified'}"></i><span th:text="${session.user.getEmail()==null?'未绑定':'绑定'}"></span>
                                        </td>
                                        <td style="vertical-align:middle;">
                                            <!--绑定-->
                                            <a href="javascript:void(0);" th:if="${session.user.getEmail()==null}" class="btn btn-w-xs btn-round btn-primary" onclick="$('#bindEmailModal').modal('show')"><label><i class="mdi mdi-security"></i></label>绑定</a>
                                            <!--解绑-->
                                            <a href="javascript:void(0);" th:if="${session.user.getEmail()!=null}" class="btn btn-w-xs btn-round btn-danger" onclick="$('#unBindEmailModal').modal('show')"><label><i class="mdi mdi-alert-outline"></i></label>解绑</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<!-- 修改头像模态框 -->
<div th:replace="common/user/changAvatarModal::changavatarmodal"></div>
<!-- 个人中心页面模态框 -->
<div th:replace="common/user/myCenterModal::mycentermodal"></div>
</body>
</html>